<template>
    <div>
        姓:<input type="text" v-model="person.firstName">
        <br>
        名:<input type="text" v-model="person.lastName">
        <br>
        全名：<span>{{ person.fullName}}</span>
        <br>
        <input type="text" v-model="person.fullName">
        <br>
        <h1>当前计数:{{sum}}</h1>
        <button @click="sum++">点我加一</button>
        <br>
        <h2>当前说的话{{msg2}}</h2>
        <button @click="msg2+='!'">点我加一</button>
        <h3>当前薪资:{{person.job.salary}}k</h3>
        <button @click="person.job.salary++">点我涨薪</button>
    </div>

</template>

<script>
    //组合式api 用什么就从vue里面解构
    import {
        ref,
        reactive,
        computed,
        watch,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted
    } from 'vue'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        setup(props, ctx) {
            let person = reactive({
                firstName: '夏',
                lastName: '敏',
                job: {
                    salary: 20
                }
            })
            let sum = ref(0)
            let msg2 = ref("你好啊")
            //计算属性监听
            person.fullName = computed({
                get() {
                    return person.firstName + "-" + person.lastName
                },
                set(value) {
                    let nameArr = value.split('-')
                    person.firstName = nameArr[0]
                    person.lastName = nameArr[1]
                }
            })
            //情况一:监听ref的响应式数据
            watch([sum, msg2], (newValue, oldValue) => {
                console.log('我监视到sum或者msg2变化')
            }, {immediate: true, deep: true})
            //情况二:监听reactive响应式数据的某一个属性
            watch(() => person.job.salary, (newValue, oldValue) => {
                console.log('涨薪了')
            })
            /*
            * 情况三:监听reactive定义的一个响应式数据的全部属性
            *   注意1:此处无法正确获取oldValue的值
            *   注意2:强制开启了深度监视(deep配置无效)
            * */
            watch(person, (newValue, oldValue) => {
                console.log(newValue, oldValue)
            })
            //情况二:监听reactive响应式数据的某些属性
            watch([() => person.job.salary, () => person.firstName], (newValue, oldValue) => {
                console.log('涨薪了')
            })
            onBeforeMount(() => {
                console.log('---onBeforeMount---')
            })
            onMounted(() => {
                console.log('---onMounted---')
            })
            onBeforeUpdate(() => {
                console.log('---onBeforeUpdate---')
            })
            onUpdated(() => {
                console.log('---onUpdated---')
            })
            onBeforeUnmount(() => {
                console.log('---onBeforeUnmount---')
            })
            onUnmounted(() => {
                console.log('---onUnmounted---')
            })

            return {
                person,
                msg2,
                sum
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
